<template>
  <div class='adviser-list box-size'>
    <img :src="getOneInfo.pic" class="fl" alt="">
    <div class="info">
      <p class="clear">
        <span class="name fl">{{getOneInfo.name}}</span>
        <span class="sex fl"><img :src="getOneInfo.sex==1?imgs.sex.mail:imgs.sex.femail" alt=""></span>
        <span class="duty fl" :style="'background:url('+imgs.duty['insurance'+(getOneInfo.type.indexOf('保养')>-1?3:getOneInfo.type.indexOf('续保')>-1?2:1)]+');'">{{getOneInfo.type}}</span>
        <Choose class="fr" :change="operateShow" :info="getOneInfo"></Choose>
      </p>
      <p class="clear">
        <span class="phone-name">联系电话：</span><span class="phone-number">{{getOneInfo.phone | formatPhone}}</span>
      </p>
    </div>
  </div>
</template>
<script>
import Choose from './choose'
export default {
  props:["info","operateShow"],
  components:{Choose},
  name: "",
  data () {
    return {
      imgs:{
        sex:{
          mail:require('../../../assets/img/hpmepage/adviser/mail.png'),
          femail:require('../../../assets/img/hpmepage/adviser/femail.png'),
        },
        duty:{
          insurance1:require('../../../assets/img/hpmepage/adviser/bac_1.png'),//保险顾问
          insurance2:require('../../../assets/img/hpmepage/adviser/bac_2.png'),//续保
          insurance3:require('../../../assets/img/hpmepage/adviser/bac_3.png'),//保养
        },
      },
    };
  },
  computed:{
    getOneInfo(){
      return this.info||{}
    }
  },
  filters:{
    formatPhone(val){
      if(!val)return "暂无"
      return val.slice(0,3)+" "+val.slice(3,7)+" "+val.slice(7)
    },
    formatType(val){
      if(!val)return "暂无"
      var array=["保险顾问","续保顾问","保养顾问"]
      return array[val-1]
    }
  },
   methods:{
  },
   created(){
  }
}
</script>
<style lang="scss" scoped>
.adviser-list{
  padding-bottom: 10px;
  min-height: 70px;
  border-bottom: 1px solid #F2F2F2;

  img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .info{
    margin-left: 80px;
    
    p{
      margin-bottom: 10px;
      font-size: 14px;
    }
    .phone-name{
      color: #333;
    }
    .phone-number{
      color: #999;
    }
  }

  .name{
    font-size: 14px;
    color: #333;
    margin-right: 5px;
  }
  .sex{
    margin-right: 5px;

    img{
      width: 15px;
      height: 15px;
      transform: translateY(2px)
    }
  }

  .duty{
    width: 60px;
    font-size: 11px;
    height: 15px;
    transform: translateY(2px);
    line-height: 15px;
    text-align: center;
    color: #fff;
    background-size: 100%!important;
  }
}
</style>